<template>
  <div>
    <el-upload
    
      :class="{ hidden }"
      action="#"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      list-type="picture-card"
      :on-change="onChange"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog title="预览图片" :visible.sync="dialogVisible" width="40%">
      <img :src="imgUrl" style="width: 400px" />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "UploadImage",
  components: {},
  props: {},
  data() {
    return {
      fileList: [],
      dialogVisible: false, //预览图片的弹层
      imgUrl: "",
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMS0wOS0wOCAxOTo0MzowMyIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2NDY0NTIwOTl9.tgqHELzyxNYCH0omFGh8bRQmerap24YZkMXQFluKbcA",
    };
  },
  computed: {
     hidden() {
        return this.fileList.length === 2;
      },
  },
  methods: {
    // 上传之前
    beforeUpload(file) {
      // 校验大小
      const maxSize = 7;
      if (file.size / 1024 / 1024 > maxSize) {
        this.$message.warning(`图片超过${maxSize}M`);
        return false;
      }
      // 校验类型
      const fileTypes = ["image/jpeg", "image/jpg", "image/gif", "image/png"];
      if (!fileTypes.includes(file.type)) {
        this.$message.warning("文件类型应为jpeg,jpg,gif,png");
        return Promise.reject("文件类型不对");
      }
    },
  
    //发送请求
    httpRequest({ file }) {
      const fd = new FormData();
      fd.append("file", file);
      axios({
        url: "http://124.223.14.236:8060/admin/common/upload?type=images",
        data: fd,
        headers: {
          "x-token": this.token,
        },
        method: "POST",
      }).then(({ data: { data } }) => {
        console.log(2222222222222222);
        this.fileList=[{
          name: data.name,
          url: `http://124.223.14.236:8060/${data.savePath}`,
          upload:true,
        }]
      });
    },
    // 预览图片
    handlePreview(file) {
      this.dialogVisible = true;
      this.imgUrl = file.url;
    },
    // 移除图片
    handleRemove(file, fileList) {
      // this.fileList = fileList;
      this.fileList = fileList.filter(item=>item.uid !== val.uid)
    },
    onChange(file, fileList){
      console.log(file.status);
      console.log(JSON.stringify(fileList));
      console.log('onChange');
    }
  
  },
};
</script>
<style lang="scss" scoped>
.hidden {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
